<template>
  <div>
    <a-radio-group :defaultValue="defaultValue" @change="handleChange" v-if="mode === 'radio-group'">
      <a-radio v-for="item in option.options" :key="item.value" :value="item.value">{{item.label}}</a-radio>
    </a-radio-group>
    <a-select :defaultValue="defaultValue" @change="handleSelectChange" v-else-if="mode === 'radio-select'">
      <a-select-option v-for="item in option.options" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'IRadio',
  props: {
    option: {
      type: Object,
      required: false,
      default: () => {
        return {
          options: []
        };
      }
    },
    defaultHelp: {
      type: String,
      required: false,
      default: () => {
        return '';
      }
    }
  },
  computed: {
    mode() {
      if (this.option.options && this.option.options.length > 0) {
        if (this.option.options.length < 6) {
          return 'radio-group';
        } else {
          return 'radio-select';
        }
      }
    },
    defaultValue() {
      let defaultValue = '';
      if (this.option.options && this.option.options.length > 0) {
        this.option.options.forEach(option => {
          if (option.defaultValue) {
            defaultValue = option.value;
          }
        });
      }
      return defaultValue;
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e.target.value);
    },
    handleSelectChange(value) {
      this.$emit('change', value);
    }
  }
}
</script>

<style scoped>

</style>